<template>
	<div class="xw-desigen">
		<Toolbar @close="close" />
		<div class="xw-desigen_content">
			<div class="xw-desigen_content_menu">
				<div v-for="(menu,index) in menuList" :key='index'>
					<div class="xw-desigen_content_menu_title">{{menu.title}}</div>
					<draggable :group="{name:'default', pull:'clone',put:false}" :sort="false" :list="menu.list"
						class="xw-desigen_draggable">
						<Menu v-for="(item,i) in menu.list" :key='i' :menu="item"></Menu>
					</draggable>
				</div>
			</div>
			<div class="xw-desigen_content_center">
				<el-row :gutter="20">
					<el-form v-model="labelPosition" :label-width="formConfig.labelWidth+'px'" :size="formConfig.size"
						:label-position="formConfig.labelPosition"
						:hide-required-asterisk="formConfig.hideRequiredAsterisk" :show-message="formConfig.showMessage"
						:inline-message="formConfig.inlineMessage">
						<xw-draggable ref='XwDraggable' @draggable='draggable' />
					</el-form>
				</el-row>
			</div>
			<div class="xw-desigen_content_right">
				<Config ref="Config" @change="configChange" />
			</div>
		</div>
	</div>
</template>

<script>
	import Toolbar from './components/Toolbar'
	import Menu from './components/Menu'
	import Config from './components/Config'
	import formConfig from './config/form.js'
	import createMenu from './config/menu.js'
	import {
		getComponentsName,
		getComponentsProp
	} from './utils.js'

	const menuList = createMenu()


	export default {
		data() {
			return {
				labelPosition: 'right',
				formConfig: this.getForm(),
				drag: false,
				menuList,
			}
		},
		components: {
			Toolbar,
			Menu,
			Config,
		},
		mounted() {

		},
		methods: {
			close() {
				this.$nextTick(() => {
					this.$refs.XwDraggable.content = []
					// this.$refs.XwDraggable.add()
				})
			},
			draggable(item) {
				this.$nextTick(() => {
					this.$refs.Config.init(item, item ? true : false)
				})
			},
			configChange(e, form) {
				// console.log(e,form)
				localStorage.setItem('formConfig', JSON.stringify(form))
				// localStorage.setItem('otherConfig', JSON.stringify(other))
				// localStorage.setItem('fieldConfig', JSON.stringify(field))

				this.formConfig = this.getForm()
				this.$nextTick(() => {
					this.$refs.XwDraggable.init(e)
				})
			},
			getForm(form = null) {
				form = JSON.parse(localStorage.getItem('formConfig'))
				if (!form) form = formConfig()
				const obj = {}
				form.map(item => {
					const key = item.field
					obj[key] = item.value
				})
				return obj
			},
			onMove(e) {
				return false;
			},
		}
	}
</script>

<style lang="scss">
	.xw-desigen {
		&_content {
			height: calc(100% - 50px);
			display: flex;

			>div {
				height: 100%;
			}

			&_menu {
				width: 290px;
				padding-left: 19px;
				border-right: var(--xw-border-dotted);

				&_title {
					font-weight: bold;
					height: 40px;
					line-height: 40px;
					border-left-width: 0;
					border-right-width: 0;
				}
			}

			&_center {
				padding: 15px;
				background: #f4f6f8;
				flex: 1;

				.el-row,.el-form {
					background: var(--xw-content-bgcolor);
					width: 100%;
					height: 100%;
					border-radius: 5px;

					>div {
						width: 100%;
						height: 100%;
						overflow-y: auto;
					}
				}

				.Menu {
					width: 100%;
					height: 10px;
					padding: 0;
					background: var(--xw-color-primary);

					* {
						display: none;
					}
				}
			}

			&_right {
				border-left: var(--xw-border-dotted);
			}
		}

		&_draggable {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		// .ghost {
		// 	width: 100%;
		// 	height: 10px;
		// 	border-radius: 10px;
		// 	background: var(--xw-color-primary);

		// 	* {
		// 		display: none;
		// 	}
		// }

		// .chosenClass {
		// 	background-color: red !important;
		// 	opacity: 1 !important;
		// }

	}
</style>